<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>示例</title>
</head>
<body>
    <!-- v-bind 主要用法是动态更新 HTML 元素上的属性 -->
    <div id="app1">
        <a v-bind:href="url">链接</a>
        <img v-bind:src="imgUrl" />

        <!-- 缩写为 -->
        <a :href="url">链接</a>
        <img :src="imgUrl" />
    </div>

    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>

        var app1 = new Vue({
            el: "#app1",
            data: {
                url: 'http://www.github.com',
                imgUrl: "./dog.jpg"
            }
        });


    </script>

</body>
</html>